<template>
  <div class="contain">
    <div class="Blocks">作者--{{res.author}}</div>
    <div class="title">
      <div class="textL">{{res.title}}</div>
      <div v-for="(citem,cindex) in res.c" :key="cindex" class="content">{{citem}}</div>
    </div>

    <div class="cont">
      <div class="ilike" :class="[{active:ILikeIt == true}]" @click="Ilike">
        <img src="/static/icon/ilike.png" alt />
        <p>我喜欢</p>
      </div>
    </div>
  </div>
</template>

<script>
import { navto } from "@/utils/util";
import { toast } from "@/utils/index";
import { getPoemById, getPoetryById, getILike, PostILike } from "@/api/api";
import lastPage from "@/components/lastPage";
export default {
  data() {
    return {
      st: 1,
      id: 0, //作者id
      res: {},
      ILikeIt: false //是否喜欢
    };
  },
  onLoad(e) {
    console.log(e);
    this.id = e.id;
    this.st = e.st;
  },
  onShow() {
    let token = mpvue.getStorageSync("token") || "";
    if (token) {
      this.getPoem();
    } else {
      this.getToken();
    }
  },
  methods: {
    getToken() {
      // 跳转回授权页面
      navto("/pages/authorization/main", "");
    },
    /**
     * 获得具体的诗篇
     */
    getPoem() {
      let id = this.id;
      if (this.st == 1) {
        getPoemById({ id: id }).then(res => {
          this.detailData(res);
        });
      } else if (this.st == 2) {
        getPoetryById({ id: id }).then(res => {
          this.detailData(res);
        });
      }
    },
    /**
     * 是否喜欢
     */
    Ilike() {
      if (this.ILikeIt) {
        return;
      }
      let data = {
        poeid: this.id,
        type: this.st,
        likestatus: true
      };
      PostILike(data).then(res => {
        console.log(res);
        if (res && res.data.code == 0) {
          toast("喜欢成功！");
          this.ILikeIt = true;
        }
      });
    },

    /**
     * 处理数据
     */
    detailData(res) {
      if (res.data) {
        this.getIlike();
        setTimeout(function() {
          wx.hideLoading();
        }, 300);
        this.res = res.data;
        this.res.c = res.data.content.split("|");
      }
    },
    /**
     * 获得用户是否喜欢这个作品
     */
    getIlike() {
      let data = {
        poeid: this.id,
        type: this.st
      };
      getILike(data).then(r => {
        if (r) {
          this.ILikeIt = r.data;
        }
      });
    }
  }
};
</script>

<style lang='less' scope>
.contain {
  width: 90%;
  margin: 0rpx auto;
  margin-top: 25rpx;
  box-sizing: border-box;
  background-color: #fff;
  .goTop {
    width: 144rpx;
    height: 144rpx;
    position: fixed;
    right: 50rpx;
    bottom: 20rpx;
    z-index: 10;
    img {
      width: 50%;
      height: 50%;
    }
  }
  .Blocks {
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    padding-left: 22rpx;
    border-left: 8rpx solid rgb(173, 46, 46);
    color: rgb(173, 46, 46);
  }

  .title {
    margin-top: 18rpx;
    margin-bottom: 38rpx;
    padding: 18rpx 18rpx;
    background-color: rgb(237, 245, 244);
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    border-radius: 25rpx;
    .author {
      margin: 18rpx auto;
      font-size: 24rpx;
      font-size: 400;
    }
    .content {
      margin: 12rpx 18rpx;
      padding: 12rpx 18rpx;
      font-size: 28rpx;
      font-size: 400;
    }
  }

  .cont {
    text-align: center;
    .ilike {
      margin: 12rpx auto;
      width: 115rpx;
      height: 115rpx;
      border: 1rpx solid #b9b7b7;
      border-radius: 100%;
      font-size: 24rpx;
      &.active {
        background-color: rgb(218, 158, 171);
        color: #fff;
      }
      img {
        width: 55rpx;
        height: 55rpx;
      }
    }
  }
}
</style>
